/**
 * 近一个月商品销量统计  圆形统计图
 */
import React, { memo } from 'react';
import { Card, Radio } from 'antd';
import { FormattedMessage } from 'umi/locale';
import styles from './Analysis.less';
import { Pie } from '@/components/Charts';
import Yuan from '@/utils/Yuan';

const ProportionSales = memo(
  ({ dropdownGroup, salesType, loading, salesPieData, handleChangeSalesType }) => (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title="近一个月商品销量统计"
      bodyStyle={{ padding: 24 }}
      extra={
        <div className={styles.salesCardExtra}>
          {/*{dropdownGroup}*/}
          <div className={styles.salesTypeRadio}>
            <Radio.Group value={salesType} onChange={handleChangeSalesType}>
              <Radio.Button value="all">
                <FormattedMessage id="app.analysis.channel.all" defaultMessage="ALL" />
              </Radio.Button>
              <Radio.Button value="preschool">
                <FormattedMessage id="app.analysis.channel.preschool" defaultMessage="幼教理论书" />
              </Radio.Button>
              <Radio.Button value="picture-books">
                <FormattedMessage
                  id="app.analysis.channel.picture-books"
                  defaultMessage="精选绘本"
                />
              </Radio.Button>
              <Radio.Button value="magazine">
                <FormattedMessage id="app.analysis.channel.magazine" defaultMessage="杂志订阅" />
              </Radio.Button>
            </Radio.Group>
          </div>
        </div>
      }
      style={{ marginTop: 24, height: 480 }}
    >
      <div
        style={{
          minHeight: 380,
        }}
      >
        <h4 style={{ marginTop: 8, marginBottom: 32 }}>商品销量</h4>
        <Pie
          hasLegend
          subTitle={<FormattedMessage id="app.analysis.salenums" defaultMessage="销量" />}
          total={() =>
            `${
              salesPieData === undefined ? 0 : salesPieData.reduce((pre, now) => now.y + pre, 0)
            }件`
          }
          data={salesPieData}
          valueFormat={value => `${value}件`}
          height={248}
          lineWidth={4}
        />
      </div>
    </Card>
  )
);

export default ProportionSales;
